<template>
  <div class="mainsss"> 
        <div class="masks"  v-if="maskShow"></div>
    <div class="Fj" v-if="commodityShow">
      <div class="FJtop">
       <div class="FjtopInfo">
          <div class="Fjtext">
           平台编码：ZXZ89090商品信息
          </div>
           <div class="wrong" @click="closeCommodity">
            <a-icon type="close" />
          </div>
       </div>
      </div>
      <div class="Fjmain">
         <div class="FjTitle">
           <div class="FjImg">
             <img src="../../../../assets/image/buyer/SourcingGoods.png" alt="">
           </div>
           <div class="FjName">
             寻源商品： 燃油滤清器/ZXBDSJFBS7
           </div>
         </div>
      <div class="FjInfo">
           <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
         <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
   </div>
    <div class="Specifications">规格：</div>
   <div class="FjInfo" style="background:rgb(249, 251, 255)">
  <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
         <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
   </div>
      <p class="Specifications">图片:</p>
     <div class="imgInfo" style="margin-top:-15px">
          <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
     <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
            <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
       </div>
  </div>
  </div>  
    <div class="Fj" v-if="viewShow">
      <div class="FJtop">
       <div class="FjtopInfo">
          <div class="Fjtext">
           燃油滤清器-ZXZJK8909089
          </div>
           <div class="wrong" @click="close">
            <a-icon type="close" />
          </div>
       </div>
      </div>
       <div class="Fjmain">
              <p class="remarks">备注内容：</p>
       <div class="reMarkinfo">
         备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注
       </div>
        <p class="remarkIMg">补充图片</p>
     <div class="imgInfo">
          <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
     <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
            <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
       </div>
       </div>
    </div>
     
    <a-row class="table-title">
      <a-col
        :span="6"
        class="textOverflow"
        style="padding-left: 40px"
      >
        平台编码
      </a-col>
      <a-col :span="4" class="textOverflow"> 品质品牌 </a-col>
      <a-col :span="6" class="textOverflow"> 价格（含税/含运费） </a-col>
      <a-col :span="4" class="textOverflow"> 供应商 </a-col>
      <a-col :span="4" class="textOverflow" style="padding-left: 40px"> 操作 </a-col>
    </a-row>
    <div class="tableInfos">
      <div class="everyTables">
    <div class="tablesInfo">
        <div class="indexs">
           <div class="left">
             <div class="index">1</div>
          <div class="names">燃油滤清器</div>
          <div class="code">
            <span class="codeText">寻源编码: </span>
            <span>ZXBDSJFBS7868878</span>
          </div>
          <div class="number">
            <span class="codeText">数量: </span>
            <span>X4</span>
          </div>
          <div class="quality">
            <span class="codeText">品质要求: </span>
            <span>原厂/品牌</span>
          </div>
          <!-- <div class="overdueImg">
              <img src="../../../../assets/image/buyer/overdueLogo.png" alt="">
          </div> -->
           </div>
          <div class="additional">
             <span class="codeText">附加内容: </span>
              <div class="infoView" @click="enclosures()">
               查看
             </div>
          </div>
        </div>
          <div class="everyTableInfo">
          <div class="codess">
           <span>SD00343242</span>
           <div class="codeImg" @click="goCommodity">
             <img src="../../../../assets/image/buyer/message.png" alt="">
           </div>
          </div>
          <div class="brands">
            <div class="brandInfo">
             <div class="brandLeft">
              品牌
          </div>
          <div class="brandRight">
             博士
          </div>
            </div>
          </div>
        <div class="rates">
            <div class="allRate">
              <div class="rateTop">
              <div class="rateNum"> 199.99</div>
            <div class="rateImg">
                <img src="../../../../assets/image/buyer/rise.png" alt="">
            </div>
             <div class="rateText">
                <span class="SL">税率</span>
               <span class="percentage">14%</span>
             </div>
            </div>
            <div class="rateBottom">
              <div>价格有效期： </div>
              <div>2020 / 2 / 23</div>
            </div>
            </div>
          </div>

          <div class="validitys">
  
             <div class="leftTop">
               <div class="name">上海信达雅汽车贸易有限公司</div>
            <div class="zhiding">指定</div> 
             </div>
            <div class="add">上海市宝山区 会山镇</div>
       
          </div>

          <div class="operation">
            <img src="../../../../assets/image/buyer/viewInfo.png" alt="">
            <span>企业信息</span>
          </div>
    </div>
       </div>
    </div>
       </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
     viewShow:false,
     commodityShow:false,
     maskShow:false,
    }
  },
  created(){
   console.log('created');
  },
  methods:{
    goCommodity(){ 
       this.commodityShow=true
       this.maskShow=true
    },
    closeCommodity(){
   this.commodityShow=false
    this.maskShow=false
    },
    enclosures(){
      this.viewShow=true
       this.maskShow=true
    },
    close(){
        this.viewShow=false
         this.maskShow=false
    }
  }
};
</script>

<style lang='less' scoped>
html,
body {
  width: 100%;
}
.mainsss{
  width: 100%;
  height: 100%;
    background-color: rgb(237, 239, 243);
}
.masks {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 100;
}
   .FJtop{
     width: 100%;
     height: 15;
     border-bottom: 1px solid rgb(242, 242, 242);
     .FjtopInfo{
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-around;
       .Fjtext{
         margin-left: 25px;
         width: 90%;
         font-size: 16px;
         font-weight: bold;
         line-height: 54px;
       }
       .wrong{
         margin-right: 24px;
         width: 10%;
         width: 16px;
         height: 16px;
         img{
           width: 100%;
           height: 100%;
         }
       }
     }
   }
.Fj{
  position: fixed;
  top: 20%;
  width: 70%;
  height: 70%;
 
  background-color: white;
   z-index: 110;  
   border-radius: 8px;
   .Fjmain{
     width: 100%;
     height: 85%;
      overflow-y: auto;
   }
   .FjTitle{
     margin: 24px;
    //  width: 100%;
     display: flex;
     align-items: center;
     .FjImg{
        width: 24px;
        height: 24px;
        img{
          width: 100%;
          height: 100%;
        }
     }
     .FjName{
       margin-left: 12px;
       font-size: 14px;
       font-weight: bold;
     }
   }
   .Specifications{
     margin: 16px 30px 10px;
     font-size: 12px;
      color:rgb(174, 179, 185)
   }
   .FjInfo{
     width: 95%;
     display: flex;
     margin: auto;
     justify-content: space-between;
     flex-wrap: wrap;
     align-items: center;
     .everyInfo{
         padding-left: 30px;
       width: 30%;
       margin-top: 16px;
       display: flex;
       font-size: 12px;
       .front{
         color:rgb(174, 179, 185)
       }
     }
   }
     .remarks{
       margin: 24px;
     }
     .reMarkinfo{
       background-color: rgb(248, 249, 250);
       margin: auto;
       width: 90%;
     }
     .remarkIMg{
           margin: 24px 24px 0px;
     }
     .imgInfo{
       width: 90%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .everyImg{
          margin: 16px 16px 16px 0px;
          width: 120px;
          height: 120px;
          border: 1px solid rgb(237, 239, 243);
        }
     }
}
.table-title {
  width: 100%;
  margin-top: 10px;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 500;
  background-color: rgb(248, 249, 250);
  .textOverflow {
    font-weight: bold;
  }
}
.tableInfos{
  width: 100%;
  height: calc(100vh - 200px);
 padding-bottom: 20px;
   margin: auto;
   margin-top: 8px;
  .everyTables {
    width: 100%;
    background-color: skyblue;
    border-bottom: 1px solid rgb(237, 239, 243);
    .tablesInfo{
         width: 100%;
          display: flex;
         flex-direction: column;
         background-color: white;
             .indexs {
         width: 100%;
         margin: auto;
          height: 48px;
          background-color: rgb(248, 249, 250);
      display: flex;
      .left{
         width: 90%;
      height: 100%;
      display: flex;
      align-items: center;
      }
      .codeText {
        color: rgb(165, 171, 178);
      }
      .index {
        margin-left: 16px;
        width: 20px;
        height: 20px;
        border: 1px dashed black;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
      }
      .names {
        font-weight: bold;
        margin-left: 16px;
      }
      .code {
        height: 15px;
        line-height: 15px;
        width: 220px;
        margin-left: 20px;
        border-right: 1px solid black;
      }
      .number {
        width: 100px;
        height: 15px;
        line-height: 15px;
        margin-left: 16px;
        border-right: 1px solid black;
      }
      .quality {
        margin-left: 15px;
      }
      .overdueImg{
          margin-left: 10px;
      }
      .additional{
        align-self: center;
          width: 10%;
          margin-right: 16px;
          display: flex;
          .infoView{
            color: blue;
            cursor: pointer;
          }
      }
    }
    }
    
    .everyTableInfo{
      width: 100%;
      height: 64px;
      border-bottom: 1px solid  rgb(248, 249, 250);
      display: flex;
      align-items: center;
      .codess{
        width: 20%;
        // background-color: skyblue;
        font-size: 12px;
        color: rgb(116, 124, 136);
        margin-left: 16px;
        display: flex;
        .codeImg{
          margin-left: 8px;
          width: 16px;
          height: 16px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .brands{
        width: 12%;
        // background-color: pink;
        .brandInfo{
          width: 100%;
           display: flex;
           height: 20px;
           align-items: center;
           justify-content: space-around;
              text-align: center;
           .brandLeft{
             width: 50%;
               height: 12px;
               line-height: 12px;
             border-right: 2px solid rgb(116, 124, 136);
           }

           .brandRight{
             width: 32px;
           }
        }
      }
        .rates{
        width: 15%;
        height: 100%;
        // background-color: blue;
        margin-left: 70px;
        .allRate{
          width: 100%;
          height: 90%;
          margin: auto;
       display: flex;
        align-items: center;
        flex-wrap: wrap;
        }
        .rateTop{
          width: 100%;
            display: flex;
            .rateNum{
          font-size: 16px;
          font-weight: bold;
        }
        .rateImg{
          width: 16px;
          height: 16px;
          margin-left: 5px;
          border: 1px dashed rgb(116, 124, 136);
        }
        img{
          width: 90%;
          height: 90%;
         margin-bottom: 6px;
         margin-left: 1px;

        }
        .rateText{
          margin-left: 11px;
          width: 70px;
          display: flex;
          justify-content: space-between;
          border: 1px solid rgb(239, 241, 244);
          .SL{
            width: 50%;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border-right: 1px solid  rgb(239, 241, 244);
             color: rgb(116, 124, 136);
          }
          .percentage{
            font-weight: bold;
          }
        }
        }
        .rateBottom{
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          color: rgb(188, 192, 197  );
        }
      }
           .validitys{
        width: 20%;
        font-size: 12px;
             margin-left: 50px;
        // background-color: red;
           .leftTop{
             display: flex;
             justify-content: space-around;
             .zhiding {
          margin-left: 4px;
          width: 33px;
          height: 18px;
          border: 1px solid blue;
          color: blue;
          text-align: center;
          line-height: 18px;
          font-size: 12px;
        }
           }
           .add{
             margin-top: 5px;
             text-align: center;
           }
      }
            .operation{
        width: 8%;
        text-align: center;
        // background-color: skyblue;
        cursor: pointer;
        margin-left: 50px;
      }
        
    }
  }
}
</style>